// import React, { Component } from "react";
// import "./05-classnames.css";

// class Classnames extends Component {
//   render() {
//     return (
//       <>
//         <h3>classnames</h3>
//         <p className={this.props.color === "red" ? "red" : "green"}>
//           hello React!
//         </p>
//       </>
//     );
//   }
// }

// export default Classnames;

import React, { Component } from "react";
// 引入classnames，用于不同的条件去添加不同的样式
import classNames from "classnames/bind";

import styles from "./05-classnames.css";

let cx = classNames.bind(styles);

class App extends Component {
  render() {
    let className = cx({
      // key就是类名，value就是表达式
      // 表达式里面如果有了state和props以后
      red: 1 + 1 > 2,
      green: true,
      size: 1 + 1 > 2,
    });
    return (
      <>
        <h3>classnames</h3>
        <p className={className}>hello React!</p>
      </>
    );
  }
}

export default App;
